<template>
  <div>
    <div class="request-detail clearfix">
      <h1 class="title">
        <span @click="back" class="blueFont">{{path1}}</span>
        <span v-for="(item, index) in categories" :key="index"> > <span class="blueFont"
                                                                        @click="goCategories(item, index)">{{item.name}}</span></span>
      </h1>
      <!--<div class="ratings">-->
      <!--&lt;!&ndash;评星&ndash;&gt;-->
      <!--<ul class="star-box">-->
      <!--<li class="star-item" v-for="item in 5" :class="item >data.starScope  && item < (data.starScope + 1) ? 'li-half' : ''">-->
      <!--<template v-if="item >data.starScope  && item < (data.starScope + 1)">-->
      <!--<i class="material-icons yellow">star</i>-->
      <!--<i class="material-icons gray">star</i>-->
      <!--</template>-->
      <!--<template v-else>-->
      <!--<i class="material-icons" :class="item <= data.starScope?'yellow':'gray'">star</i>-->
      <!--</template>-->
      <!--</li>-->
      <!--<li @click="scrollToReview">({{data.reviewCount}} Ratings)</li>-->
      <!--</ul>-->
      <!--<div class="tooltip">-->
      <!--<div class="tooltip-indicator">-->
      <!--<span>-->

      <!--</span>-->
      <!--</div>-->
      <!--<div class="tooltip-content">-->
      <!--<div class="product-reviews-rating-container">-->
      <!--<a href="javascript:;" @click="scrollToReview" class="product-reviews-anchor">-->
      <!--<div class="product-reviews-average-rating">-->
      <!--{{data.starScope}}-->
      <!--</div>-->
      <!--</a>-->
      <!--</div>-->
      <!--<p>Average of {{data.reviewCount}} ratings</p>-->
      <!--<div class="star-wrapper" v-for="(val, index) in 5" :key="index">-->
      <!--<div>-->
      <!--<ul class="star-box">-->
      <!--<li class="star-item" v-for="item in 5"><i class="material-icons" :class="item <= (5 - index)?'yellow':'gray'">star</i></li>-->
      <!--</ul>-->
      <!--</div>-->
      <!--<div class="star-meter">-->
      <!--<span :style="{width : starPercent[index] + '%'}" class="c-bg-prim"></span>-->
      <!--</div>-->
      <!--<div class="star-count-percentage">{{starPercent[index]}}%</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <h2 class="title2" :title="headTitle">{{headLine}} </h2>

      <div class="cont">
        <div class="cont-left">
          <sliders :images="sliders" ref="sliders"></sliders>

          <div class="product-detail">
            <h3 class="title3">Product Detail</h3>
            <div style="text-align: center">
              <img src="./black-detail.jpg" alt="Black friday">
            </div>
            <div class="detail-info" v-if="data.description !== ''" v-html="data.description"></div>
            <div class="detail-info" v-else>
              <p class="no-detail-info"> No product detail</p>
            </div>

          </div>
        </div>
        <div class="cont-right" v-show="sliders.length">
          <!--评星查看-->
          <!--<div class="deal-highlights-wrapper">-->
          <!--<div class="deal-highlights">-->
          <!--<div class="four  columns" v-if="promotionType === 'Cashback'" style="width:86px;">-->
          <!--<div class="icon-container">-->
          <!--<div class="icon">-->
          <!--<span class="icon-now">-->

          <!--</span>-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="text red">-->
          <!--Limit One Per Customer-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="four  columns" style="flex: 1">-->
          <!--<div class="icon-container">-->
          <!--<div class="icon">-->
          <!--<span class="icon-eye">-->

          <!--</span>-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="text">-->
          <!--{{productViews}} viewed today-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="four product-ratings columns" :style="{'flex':(promotionType === 'Cashback') ? '' : 1}">-->
          <!--<a href="javascript:;" @click="scrollToReview">-->
          <!--<div class="icon-container">-->
          <!--<div class="icon">-->
          <!--<ul class="star-box">-->
          <!--<li class="star-item" v-for="item in 5"-->
          <!--:class="item >data.starScope  && item < (data.starScope + 1) ? 'li-half' : ''">-->
          <!--<template v-if="item >data.starScope  && item < (data.starScope + 1)">-->
          <!--<i class="material-icons yellow">star</i>-->
          <!--<i class="material-icons gray">star</i>-->
          <!--</template>-->
          <!--<template v-else>-->
          <!--<i class="material-icons" :class="item <= data.starScope?'yellow':'gray'">star</i>-->
          <!--</template>-->
          <!--</li>-->
          <!--</ul>-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="text">-->
          <!--{{data.reviewCount}} Ratings-->
          <!--</div>-->
          <!--</a>-->
          <!--</div>-->
          <!--</div>-->
          <!--</div>-->
          <div class="priceBox">
            <div class="leftPrice">
              <div class="oldPrice">$29.9 USD</div>
              <div class="nowPrice">$9.9 USD</div>
            </div>
            <div class="loveIcon iocnActive"></div>
          </div>
          <div class="footer">
            <div class="selectBox">
              <el-select v-model="value2" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
            <!--自己的产品-->
            <div class="add-to-cart shopNow">
              <a href="javascript:;" @click="addToCart">Shop Now</a>
            </div>
            <div class="add-to-cart">
              <a href="javascript:;" @click="addToCart" v-if="!stockQty">Add To Cart</a>
              <a href="javascript:;" v-else style="background: #bbb">Sold Out !</a>
            </div>
          </div>

          <!--点赞or分享-->
          <div class="Outer-chain">
            <div class="Outer-chain-title">Share This Deal</div>
            <ul class="Outer-chain-box">
              <li class="Twitter" @click="twitterShare" title="Share with Twitter."></li>
              <li class="Facebook" @click="facebookShare" title="Share with Facebook."></li>
              <li class="pinterest">
                <a data-pin-do="buttonPin" title="Pin it!" target="_blank" :href="pinShare"
                   data-pin-custom="true">
                  <!--<img src="https://addons.opera.com/media/extensions/55/19155/1.1-rev1/icons/icon_64x64.png" width="25" height="25">-->
                </a>
              </li>
              <li class="fb-like"
                  :data-href="url"
                  data-layout="button_count"
                  data-action="like"
                  data-colorscheme="light"
                  data-size="small"
                  data-width="70"
                  data-show-faces="true"
                  data-share="false"
              >
              </li>
            </ul>
          </div>
          <!--end-->
        </div>
      </div>
    </div>

    <!--<article id="product-reviews" v-show="sliders.length">-->
    <!--<h2 id="product-reviews-header">Customer Reviews</h2>-->
    <!--<div id="user-review" class="user-review">-->
    <!--<div class="product-reviews-form">-->
    <!--<div class="img-wrapper">-->
    <!--<img class="lazy-loaded loading" alt="Product Picture for Customer Review" :src="reviewImg">-->
    <!--</div>-->
    <!--<div class="product-reviews-product-info">-->
    <!--<h3 :title="headTitle">{{headLine}}</h3>-->
    <!--<div id="product-reviews-form-rating" class="tooltip-trigger">-->
    <!--<ul class="star-box" style="float: left; margin-right: 30px">-->
    <!--<li class="star-item" v-for="item in 5" :class="item >data.starScope  && item < (data.starScope + 1) ? 'li-half' : ''">-->
    <!--<template v-if="item >data.starScope  && item < (data.starScope + 1)">-->
    <!--<i class="material-icons yellow">star</i>-->
    <!--<i class="material-icons gray">star</i>-->
    <!--</template>-->
    <!--<template v-else>-->
    <!--<i class="material-icons" :class="item <= data.starScope?'yellow':'gray'">star</i>-->
    <!--</template>-->
    <!--</li>-->
    <!--<li @click="scrollToReview">({{data.reviewCount}} Ratings)</li>-->
    <!--</ul>-->
    <!--<div>-->
    <!--<span style="color:#75787b">Score from Amazon</span>-->
    <!--<a :href="currentProduct.url" target="_blank" style="color: #289fee;"> (Click to view)</a>-->
    <!--</div>-->
    <!--</div>-->
    <!--<h4>Rate first, then write a review.</h4>-->
    <!--<div class="user-rating" role="button">-->
    <!--<ul class="star-box">-->
    <!--<li class="star-item" v-for="item in 5"-->
    <!--@mouseover="mouseover(item)"-->
    <!--@mouseout="mouseout(item)"-->
    <!--@click="starClick(item)"-->
    <!--&gt;-->
    <!--<i class="material-icons" :class="classStar(item)">-->
    <!--star-->
    <!--</i>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--<span class="rating-description"></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="product-reviews-form-extension">-->
    <!--<label for="product-reviews-form-textarea" class="accessibility-hidden">Write your review</label>-->
    <!--<textarea id="product-reviews-form-textarea" v-model="reviewContent" placeholder="Your review helps other Meet50off customers. The best reviews are specific, include what you liked or disliked about an item, and why. The most helpful reviews are 50-500 character long. All reviews are limited to 5000 characters." maxlength="5000"></textarea>-->
    <!--<div class="product-reviews-review-length-notification">Characters: <span class="text-count">{{reviewContent.length}}</span></div>-->
    <!--<button class="btn" @click="submitReview">Submit</button>-->
    <!--<a href="javascript:;" @click="cancelReview">Cancel</a>-->
    <!--</div>-->
    <!--<div class="review-card user-review-card" v-show="userReview.reViewer.id">-->
    <!--<div class="review-header">-->
    <!--<div class="review-header-line">-->
    <!--<div class="review-info">-->
    <!--<span class="review-rating">-->
    <!--<ul class="star-box product-reviews-rating">-->
    <!--<li class="star-item" v-for="item in 5"><i class="material-icons" :class="item <= userReview.rating?'yellow':'gray'">star</i></li>-->
    <!--</ul>-->
    <!--</span>-->
    <!--<span class="review-display-name should-truncate is-truncated" style="word-wrap: break-word;">-->
    <!--{{userReview.reViewer.name}}(you)-->
    <!--</span>-->
    <!--</div>-->
    <!--<span class="review-date">{{ userReview.reViewAt | timeFormat}}</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="review-text-container">-->
    <!--<div class="review-text" :class="userReview.content ? '' : 'rating-only-review'">{{userReview.content ? userReview.content : 'This review is a rating only review.'}}</div>-->
    <!--</div>-->
    <!--<div class="review-actions clearfix">-->
    <!--<div class="review-vote">-->
    <!--<a class="review-delete allow-submission" href="javascript:;" v-show="delBtnShow" style="color: #0093EA" @click="removeReview(userReview.id)">-->
    <!--Delete-->
    <!--</a>-->
    <!--</div>-->
    <!--<div class="review-vote-undo notification review-notification success c-bg-prim-lt" v-show="delInfoShow">-->
    <!--<span>-->
    <!--<i class="material-icons">-->
    <!--done-->
    <!--</i>-->
    <!--</span>-->
    <!--{{ userInfo }}-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="notification review-notification" style="display: none;">-->

    <!--</div>-->
    <!--</div>-->

    <!--<div class="notification review-notification user-review-notification" style="display: none"></div>-->
    <!--</div>-->
    <!--<div id="product-reviews-list" class="product-reviews-list">-->
    <!--<template v-for="(card, index) in reviewsList">-->
    <!--<review-card :card="card"></review-card>-->
    <!--</template>-->
    <!--</div>-->
    <!--<div class="product-reviews-pagination-loader"><span class="icon-g-loader"></span></div>-->
    <!--<div class="product-reviews-message"><span>{{reviewsInfo}}</span></div>-->
    <!--<div class="product-reviews-pagination-notification" style="display: none;">-->
    <!--<span>-->
    <!--<i class="material-icons">-->
    <!--error_outline-->
    <!--</i>-->
    <!--</span>-->
    <!--Oops, we couldn't load more reviews for some odd reason. please try again-->
    <!--</div>-->
    <!--<div class="product-reviews-pagination" v-show="reviewsList.length < reviewsTotal" @click="reviewsLoadMore">-->
    <!--<button class="product-reviews-pagination-button">-->
    <!--See More-->
    <!--</button>-->
    <!--</div>-->
    <!--<relation-deals :deals="recommendatoryList" @forceUpdate="forceUpdate"></relation-deals>-->
    <!--<div class="tooltip">-->
    <!--<div class="tooltip-indicator">-->
    <!--<span>-->

    <!--</span>-->
    <!--</div>-->
    <!--<div class="tooltip-content">-->
    <!--<div class="product-reviews-rating-container">-->
    <!--<a href="#product-reviews" class="product-reviews-anchor">-->
    <!--<div class="product-reviews-average-rating">-->
    <!--{{data.starScope}}-->
    <!--</div>-->
    <!--</a>-->
    <!--</div>-->
    <!--<p>Average of {{data.reviewCount}} ratings</p>-->
    <!--<div class="star-wrapper" v-for="(val, index) in 5" :key="index">-->
    <!--<div>-->
    <!--<ul class="star-box">-->
    <!--<li class="star-item" v-for="item in 5"><i class="material-icons" :class="item <= (5 - index)?'yellow':'gray'">star</i></li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--<div class="star-meter">-->
    <!--<span :style="{width : starPercent[index] + '%'}" class="c-bg-prim"></span>-->
    <!--</div>-->
    <!--<div class="star-count-percentage">{{starPercent[index]}}%</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</article>-->
    <div id="fb-root"></div>
  </div>
</template>

<script type="text/ecmascript-6">

  import {mapGetters, mapMutations, mapActions} from 'vuex'
  import {FeaturedList, getCategories, getFeaturedDetail, getProductView, postProductView} from 'api/featured-list'
  import {Cashback} from 'api/cashback-now'
  import Sliders from 'components/sliders/sliders'
  import TimeDown from 'base/countdown/countdown'
  import Sku from 'components/sku/sku'
  import {addToCart, checkStock} from 'api/cart'
  import monitoring from '../../common/js/monitoring'
  import RelationDeals from 'components/relation-deals/relation-deals'
  import ReviewCard from 'components/product-detail/review-card'
  import * as reviews from 'api/reviews'
  import {getUser} from 'common/js/token/auth'

  //facebook sdk
  const TITLE = 'Meet50off.com - Product detail'
  !(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=2029035193782318&autoLogAppEvents=1';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  let vm = {
    name: 'async',
    inject: ['reload', 'showFooter', 'hideFooter'],
    metaInfo() {
      return {
        title: TITLE, // set a title
        meta: [
          {                 // set meta
            name: 'keyWords',
            content: 'Product detail'
          },
          {
            property: 'og:url',
            content: window.location.href
          },
          {
            property: 'og:type',
            content: 'website'
          },
          {
            property: 'og:title',
            content: TITLE
          },
          {
            property: 'og:description',
            content: 'Your description'
          },
          {
            property: 'og:image',
            content: this.ogImage
          }
        ]
      }
    },
    data() {
      return {
        url: 'https://business.facebook.com/meet50off/?business_id=193156581514703',
        pinShare: 'https://www.pinterest.com/pin/create/button/?url=',
        imgUrl: imgUrl,
        headLine: '啊啊啊啊啊啊啊啊啊啊啊啊啊',
        firstLoad: true,
        options2: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value2: '',
        // 获取的总体数据
        data: {},
        // 判断是否是引流产品  //3种  Cashback  Selling  Affiliate
        promotionType: 'Selling',
        // 控制详情内容下拉
        toggleHeader: false,
        //  轮播图片数组
        sliders: [
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
          {src: 'http://uniqorn.oss-cn-shenzhen.aliyuncs.com/data/gallery_album/30/thumb_img/1546908422548439861.jpg'},
        ],
        // 变体存放
        variations: [],
        // 默认变体
        // defaultVariation:{},
        //  种类 根据sku 单独请求
        categories: [],
        //  定义的所有的属性值
        // attriubteDefines: [],
        // 数量和订单号  在点击cashbacknow 时使用
        qty: 1,
        orderNo: '',
        //  下面都是为了更新数据 而设置初始化
        currentProduct: {},
        // 库存
        stockQty: 0,
        //倒计时
        endTime: '2018-06-04 20:00:00',
        headTitle: '',
        //  路由显示控制
        path1: '',
        time: '',  //todo facebook pixel & Google Analytic time
        recommendatoryList: [], // relation deals
        reviewsList: [],
        rating: 0,  //  评星时使用
        currentRating: 0,    //  设置颜色为 rgb(1,133,198)
        ratingDescription: ["I hate it", "I don't like it", "It's okay", "I like it", "I love it"],
        currentDescription: '',
        reviewContent: '', // 评论内容
        userReview: {
          content: "", helpfulCount: 0,
          id: "",
          images: [{src: "", position: 0}],
          isOtherPlatform: false,
          parentSKU: null,
          rating: 0,
          reViewAt: "2018-07-01T08:28:51.794Z",
          reViewer: {id: "", name: ""},
          sku: "",
          title: ""
        },  // 当前登录用户的评论信息
        starPercent: [],
        delInfoShow: false,  // 控制 删除评论显示信息
        userInfo: 'Your review was successfully deleted!',
        delBtnShow: true,
        reviewImg: '',
        currentPage: 1, // 评论列表分页要用
        pageSize: 10,
        reviewsTotal: 0,
        productViews: 0,
        totalRecords: 0,
        reviewSku: '', // 目前评论接口 只支持主体sku 获取所有评论 所以 在这里缓存通过获取详情接口里面的sku值  通过这个值去获取评论
        parentSku: '' // 在提交评论时 要传个父sku
      }
    },
    computed: {
      // 加在meta标签里的 图片地址
      ogImage() {
        if (this.sliders.length) {
          return imgUrl + this.sliders[0].src
        }
      },
      classA() {
        return this.toggleHeader ? 'Upward' : 'down'
      },
      classB() {
        if (this.promotionType === 'Cashback') {
          return ''
        } else if (this.promotionType === 'Affiliate') {
          return 'green'
        } else if (this.promotionType === 'Selling') {
          return 'blue'
        }
      },
      reviewsInfo() {
        if (!this.reviewsList.length) {
          return 'There are no user reviews yet. Be the first one to review.'
        } else {
          return `Showing ${this.reviewsList.length} of ${this.reviewsTotal}`
        }
      },
      ...mapGetters([
        'featuredList'
      ])
    },
    created() {
      let params = {
        produectName: this.headLine,
        promotionType: this.promotionType,
        sku: this.currentProduct.sku || this.data.sku,
        amount: this.currentProduct.price || this.data.price,
      }
      monitoring.openProduect(params);//todo Facebook Pixel & Google Analytic Code    openProduect

      this.time = Date.parse(new Date());  //todo facebook pixel & Google Analytic time
      const path = this.$router.currentRoute.fullPath.split('/')
      this.path1 = path[1]
      this.path1 = this.path1.split('-').map(function (t) {
        return t.substring(0, 1).toUpperCase() + t.substring(1)
      })
      this.path1 = this.path1.join(' ');
      setTimeout(() => {
        this._FeaturedList()
      }, 20)

    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
        // 在有数据前  先隐藏起来footer
        vm.hideFooter()
      })
    },
    mounted() {
      $('.ratings > ul li').hover(function () {
        $('.ratings').find('.tooltip').stop().fadeIn()
      }, function () {
        $('.ratings').find('.tooltip').stop().fadeOut()
      })
      $('.tooltip-trigger > ul').hover(function () {
        $('article').find('.tooltip').css({left: '510px', top: '-12px'}).stop().fadeIn()
      }, function () {
        $('article').find('.tooltip').stop().fadeOut()
      })
    },
    methods: {
      forceUpdate() {
        console.log(111)
        this.reload()
      },
      scrollToReview() {
        let t = $('#product-reviews').offset().top
        $('html ,body').animate({scrollTop: t}, 300)
        return false
      },
      //分享or点赞
      facebookShare() {
        window.open('https://www.facebook.com/sharer/sharer.php?u=' + this.url)
      },
      twitterShare() {
        window.open('https://twitter.com/share?url=' + this.url)
      },
      //end
      produectDetailMonitoring() {   //todo Facebook Pixel &  Google Analytic 监听
        let timer = ((Date.parse(new Date()) - this.time) / 1000).toFixed(2);
        let params = {
          produectName: this.headLine,
          showTime: timer,
          promotionType: this.promotionType,
          sku: this.currentProduct.sku || this.data.sku,
          amount: this.currentProduct.price || this.data.price,
        }
        monitoring.produectDetail(params);//todo Facebook Pixel & Google Analytic Code    produectDetail

      },
      goReturn(goReturn) {
        this.produectDetailMonitoring();//todo Facebook Pixel &  Google Analytic Code
        let params = {
          url: goReturn,
          produectName: this.headLine,
          amoun: this.data.price,
          sku: this.currentProduct.sku,
        };
        monitoring.returnAmazon(params);//todo Facebook Pixel & Google Analytic Code    returnAmazon

        setTimeout(() => {   //todo Facebook Pixel &  Google Analytic Code 确保监控请求发送出去 延迟页面跳转
          window.open(goReturn, '_target');
        }, 250)
      },
      transUrl() {
        this.StartLoading(this._transUrl)
      },
      _transUrl() {
        return new Promise((resolve, reject) => {
          this.produectDetailMonitoring();//todo Facebook Pixel &  Google Analytic Code
          Cashback(this.currentProduct.sku, this.qty).then(res => {

            let params = {
              produectName: this.headLine,
              sku: this.currentProduct.sku,
              discountRate: `${this.data.discountRate * 100}%`,
              originalPrice: this.data.originalPrice,
              price: this.data.price,
              rebate: (this.data.originalPrice - this.data.price).toFixed(2) + '',
            };
            monitoring.cashbackNow(params);//todo Facebook Pixel & Google Analytic Code    cashbackNow

            resolve()
            this.setMyRequest(res)
            this.TransUrl = res.orderItems[0].productInOrder.url
            let urlKeyWords = res.orderItems[0].productInOrder.urlKeyWords || 'dp'
            console.log(urlKeyWords)
            if (res.orderStatus === "Submitted") {
              this.$router.push({ //跳到order详情
                path: `/my-order/cashback/${urlKeyWords}/${res.orderNo}`
              });
            }
            if (res.orderStatus === "Requested") {
              this.$router.push({ //跳到request
                path: `/guide/${urlKeyWords}/${res.orderNo}`
              });
            }
            if (res.orderStatus === "Confirmed") {
              this.$router.push({ //跳到my-order
                path: `/my-order?orderType=2`
              });
            }
            if (res.orderStatus === "Transferred") {
              this.$router.push({ //跳到my-order
                path: `/my-order?orderType=4`
              });
            }
          }, error => {
            reject()
            if (error) {
              this.$router.push('/my-cart')
            }
          })
        })
      },
      back() {
        this.produectDetailMonitoring();//todo Facebook Pixel &  Google Analytic Code
        const path = this.$router.currentRoute.fullPath.split('/');
        setTimeout(() => {//todo Facebook Pixel &  Google Analytic Code 确保监控请求发送出去 延迟页面跳转
          this.$router.push(`/${path[1]}`);
        }, 250)
      },
      goCategories(item, index) {
        let path = ''
        for (let i = 0; i <= index; i++) {
          let nameAry = this.categories[i].name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
          let name = nameAry.join('-')
          path += '/' + name
          this.setFocus(i + 1)
        }
        this.setCategories({
          categoryId: item.code
        })
        this.$router.push(`/categories${path}`)
      },
      timeEnd() {
        console.log(1111)
      },
      addToCart() {
        this.produectDetailMonitoring();//todo Facebook Pixel &  Google Analytic Code
        let sku = this.currentProduct.sku;

        let params = {
          produectName: this.headLine,
          sku: sku,
          amount: this.currentProduct.price || this.data.price,
        };
        monitoring.addCart(params);//todo Facebook Pixel & Google Analytic Code    addCart

        checkStock(sku)
          .then(res => {
            this.stockQty = res.stockQty
            if (res.stockQty < 1) return
            return addToCart(sku, 1)
          })
          .then((res) => {
            this.$router.push(`/my-cart/promotion`)
          })
          .catch(err => {
            console.log(err)
          })
      },
      _FeaturedList() {
        const path = this.$router.currentRoute.fullPath.split('/')
        let sku = ''
        if (!this.featuredList.sku) {
          if (path[path.length - 1]) {
            sku = path[path.length - 1]
          }
        } else {
          sku = this.featuredList.sku
        }
        if (!sku) {
          this.$router.push(`/${path[1]}`)
          return
        }
        getFeaturedDetail(sku).then(res => {
          const _this = this
          this.recommendatoryList = res.recommendatoryList
          this.data = res
          if (res.starPercent) {
            this.starPercent.push(res.starPercent['fiveStars'], res.starPercent['fourStars'], res.starPercent['threeStars'], res.starPercent['twoStars'], res.starPercent['oneStars'])
          } else {
            this.starPercent = [0, 0, 0, 0, 0]
          }
          this.sliders = res.images
          this.reviewImg = imgUrl + res.images[0].src
          this.variations = res.variations
          this.defaultVariation = res.defaultVariation
          if (this.variations.length === 0) {
            this.defaultVariation = res
          } else {
            this.parentSku = res.sku
          }
          this.currentProduct = this.defaultVariation
          this.headLine = this.data.headLine
          this.headTitle = this.data.headLine
          this.promotionType = res.promotionType

          // pinterest 分享 url
          this.pinShare = this.pinShare + `${window.location.href}&media=${this.reviewImg}&description=Meet50off-${res.urlKeyWords}.Meet50off deal price:$${this.currentProduct.price}&autologin=true`
          // 获取分类信息整理 一类 --》二类--》 三类。。
          this._initCategories(res.categoriesInfo.concat(), this.categories)
          // 因为 要确保取到 主体sku 所以这两个方法 放进来了
          this.reviewSku = res.sku
          this._getAllReviews(this.reviewSku)  // 原来参数是 sku  下同
          this._getUserReview(this.reviewSku)

          // 在获取完数据之后在 显示底部footer
          this.showFooter()
        }).catch(err => {
          // for (let key in err) {
          //   console.log(key)
          // }
          // console.log(err.request.status)
          // if (err.request.status === 404) {
          //   this.$router.push('/error-404')
          // }
          // 在获取完数据之后在 显示底部footer
          this.showFooter()
        })
        this._getProductViews(sku)
      },
      _getProductViews(sku) {
        getProductView(sku).then(res => {
          this.productViews = res
          postProductView(sku)
        })
      },
      _getAllReviews(sku) {
        reviews.getAllReviews({
          SKU: sku,
          IsVerified: true,
          PageNumber: 1,
          PageSize: this.pageSize,
          IsOtherPlatform: false
        }).then(res => {
          this.reviewsList = res.data
          this.reviewsTotal = res.totalRecords
          if (this.reviewsList.length < this.reviewsTotal) {
            this.currentPage++
          }
        })
      },
      _getUserReview(sku) {
        const user = getUser()
        if (!user) return
        reviews.getAllReviews({
          SKU: sku,
          IsVerified: false,
          PageNumber: 1,
          PageSize: 1000,
          IsOtherPlatform: false
        }).then(res => {
          res.data.forEach((item) => {
            if (!item.isVerified && item.reViewer.id === user.userName) {
              this.userReview = item
            }
          })
        })
      },
      reviewsLoadMore() {
        let sku = this.reviewSku
        reviews.getAllReviews({
          SKU: sku,
          IsVerified: true,
          PageNumber: this.currentPage,
          PageSize: this.pageSize,
          IsOtherPlatform: false
        }).then(res => {
          this.reviewsList = this.reviewsList.concat(res.data)
          if (this.reviewsList.length < res.totalRecords) {
            this.currentPage++
          }
        })
      },
      submitReview() {
        let sku = this.currentProduct.sku
        let content = this.reviewContent
        let rating = this.rating
        let parentSKU = this.parentSku
        reviews.postReview({
          sku,
          content,
          rating,
          parentSKU
        }).then(res => {
          console.log(res)
          this._getUserReview(sku)
          $('.product-reviews-form-extension').fadeOut()
          this.userInfo = 'Thanks for reviewing this product!'
          this.delInfoShow = true
          this.delBtnShow = true
        })
      },
      cancelReview() {
        this.rating = 0
        this.currentDescription = ''
        $('.rating-description').text('')
        $('.product-reviews-form-extension').fadeOut()
      },
      removeReview(reviewId) {
        reviews.deleteReview(reviewId)
          .then(res => {
            this.userInfo = 'Your review was successfully deleted!'
            this.delInfoShow = true
            this.delBtnShow = false
          })
      },
      skuChanged(sku) {
        console.log(sku)
        this._updata(sku)
      },
      _updata(sku) {
        let product = ''
        const path = this.$router.currentRoute.fullPath.split('/')
        path.splice(-1, 1, sku)
        let changeurl = path.join('/')
        this.variations.forEach(function (item) {
          if (item.sku === sku) {
            product = item
          }
        })
        let len = this.sliders.length
        this.sliders = []
        this.sliders = product.images
        console.log(product.images)
        this.$refs.sliders.selectChange(0)

        this.currentProduct = product
        this.$router.push({
          path: changeurl
        })
      },
      _strFormat(str, len) {
        if (str.length && str.length > len) {
          return str.substring(0, len) + '...'
        }
        return str
      },
      _initCategories(categories, fir) {
        let n = fir.length
        if (categories.length === 0) return
        if (n === 0) {
          let c = categories.findIndex(t => {
            return t.parentCode == 0
          })
          fir.push(categories[c])
          categories.splice(c, 1)
        } else {
          let c = categories.findIndex(t => {
            return fir[n - 1].code === t.parentCode
          })
          fir.push(categories[c])
          categories.splice(c, 1)
        }
        this._initCategories(categories, fir)
      },
      ...mapMutations({
        setMyRequest: 'SET_MYREQUEST',
        setCategories: 'SET_CATEGORIES',
        setFocus: 'SET_CATEGORY_FOCUS'
      }),
      mouseover(item) {
        this.currentRating = item
        $('.rating-description').text(`"${this.ratingDescription[item - 1]}"`)
      },
      mouseout(item) {
        this.currentRating = 0
        if (!this.currentDescription) {
          $('.rating-description').text('')
        } else {
          $('.rating-description').text(`"${this.currentDescription}"`)
        }
      },
      starClick(item) {
        this.rating = item
        this.currentDescription = this.ratingDescription[item - 1]
        $('.rating-description').text(`"${this.currentDescription}"`)
        $('.product-reviews-form-extension').fadeIn()
      },
      classStar(item) {
        if (this.currentRating) {
          if (item <= this.currentRating) {
            return 'hover-color'
          }
        } else {
          if (this.rating && item <= this.rating) {
            return 'yellow'
          }
        }
        return 'gray'
      },
      ...mapActions([
        'StartLoading'
      ])
    },
    filters: {
      toFixed(value) {
        return value.toFixed(0)
      },
      soldCount(value) {
        return value > 500 ? '500+' : value
      },
      timeFormat(time) {
        let t = new Date(time).toDateString().split(' ')
        const d = {
          1: 'st',
          2: 'nd',
          3: 'rd'
        }
        let end = t[2] % 10
        if (end <= 3 && end > 0) {
          t[2] = t[2] + d[end]
        } else {
          t[2] = t[2] + 'th'
        }
        if (t[2][0] === '0') {
          t[2] = t[2].substring(1)
        }
        return `${t[1]} ${t[2]},${t[3]}`
      }
    },
    watch: {
      '$route'(to, from) {
        console.log(111)
        if (to.path === '/my-cart/promotion') {
          console.log(11111)
        }
      }
    },
    components: {
      Sliders,
      Sku,
      TimeDown,
      RelationDeals,
      ReviewCard
    },
  }
  export default vm
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .title2
    line-height: 35px
    font-size: 22px;
    color: #343434
    padding-bottom: 30px;

  .tooltip
    width: 294px
    background: #fff
    height: 220px
    border: solid 1px #f7f6f6
    position: absolute
    z-index: 1
    display: none
    left: 180px
    top: -100px
    box-shadow: 0 0 3px 1px rgba(51, 51, 51, .5)

    .tooltip-indicator
      position: absolute
      top: 50%
      margin-top: -12px
      background: #fff

      > span
        position: absolute;
        border: 12px solid transparent
        border-left: 0
        top: 0
        left: -14px
        border-right-color: #BFBFBF

        &:before
          content: '';
          border: 12px solid transparent
          position: absolute
          left: 3px
          top: -12px
          border-left: 0
          border-right-color: #FFF

        &:after
          border: 10px solid transparent
          border-right: 0
          border-left-color: #333

    .tooltip-content
      background: #fff
      border-radius: 2px
      padding: 16px

      p
        font-size: 13px
        margin: 5px 0 10px
        color: #75787b

      .product-reviews-rating-container
        font: 40px OpenSans, Helvetica Neue, Helvetica, Tahoma, Arial, FreeSans, sans-serif;
        line-height: 1;
        margin: 5px 0;
        overflow: hidden;

        .product-reviews-anchor
          display: block;
          position: relative;

          .product-reviews-average-rating
            color: #333
            float: left

      .star-wrapper
        display: flex

        > div
          padding: 0 5px 0 0
          margin-bottom: 2px

        .star-meter
          background-color: #f6f7f8;
          flex: 1

          > span
            display: block;
            height: 19px;
            background: #18823a

        .star-count-percentage
          padding-right: 0;
          width: 30px;
          color: #75787b;
          padding-left: 5px

  .request-detail
    width: 100%;
    margin: 0 auto;
    padding-bottom: 70px

    .title
      font-size: 16px;
      line-height: 90px;
      color: #333333

      .blueFont
        color: #289fee
        cursor: pointer

    .ratings
      position: relative

    .cont
      min-width: 1080px
      margin-top 10px

      .cont-left
        width: 680px
        height: 100%
        padding-right: 20px
        border-right: 1px solid #ececec
        float: left;

      .cont-right
        position: relative
        width: 350px;
        float: right

        .deal-highlights-wrapper
          min-height: 60px

          .deal-highlights
            border-top: none;
            border-bottom: 1px solid #d5d8db
            display: flex
            margin-bottom: 20px
            padding-bottom: 12px
            color: #75787b

            .text
              font-size: 14px
              padding-top: 10px

            > div
              position: relative
              text-align: center
              vertical-align: top

              .icon-container
                height: 20px
                line-height: 20px
                margin-bottom: 6px

                .icon
                  display: inline-block
                  vertical-align: middle

                  .icon-now
                    display: inline-block
                    width: 27px
                    height: 26px
                    background: url('limited-one.png') center center no-repeat
                    background-size: cover

                  .icon-eye
                    display: inline-block
                    width: 30px
                    height: 25px
                    background: url('sold-qry.png') center center no-repeat
                    background-size: cover

        .pro-info
          display: flex
          padding-bottom: 30px
          line-height: 1.5

          .info-left
            /*padding-top: 24px*/

            .origin-price
              height: 14px
              font-size: 14px
              line-height: 18px
              color: #98999a
              text-decoration: line-through

            .discount-price
              font-size: 22px
              display: flex

              .price
                flex: 2

                > span:nth-child(1)
                  position: relative
                  top: 2px
                  font-weight: bold

                .discount-badge
                  border: 1px solid
                  border-radius: 3px
                  color: #f94c4c
                  font-size: 12px
                  font-weight: 700
                  margin-left: 4px
                  padding: 0 8px

          .info-right
            flex: 1
            font-size: 14px
            /*padding-top: 8px*/
            color: #98999a
            text-align: right

        .sku
          padding-top: 30px
          border-top: 1px solid #ccc
          margin-bottom: 30px

        .footer
          width: 100%
          padding-top: 20px
          height: 60px
          border-top: 1px solid #ccc

          .cashback
            display: flex
            text-align: center

            > div
              flex: 1
              text-align: center

            .goAmazon
              width: 72%
              margin: 0 auto
              border: 2px solid #bbb
              font-size: 13px
              border-radius: 4px
              line-height: 42px

              > a
                display: block

              .icon
                display: inline-block;
                width: 1.5rem
                height: 20px
                background: url(../../../static/img/amazon-icon.png) no-repeat
                vertical-align: middle
                background-size: 18px
                background-position: 6px 0
                font-style: normal
                position: relative

            .cashback-now
              background: #f94c4c
              display: block
              cursor: pointer
              border: 2px solid transparent
              border-radius: 4px
              line-height: 42px
              color: $color-white

          .goshopping
            > a
              display: block
              width: 100%
              cursor: pointer
              background: #18823a
              margin: 0 auto
              line-height: 42px
              color: $color-white
              font-weight: 600
              border-radius: 3px
              text-align: center

          .add-to-cart
            > a
              display: block
              width: 100%
              background: #4998e2
              margin: 0 auto
              line-height: 42px
              color: $color-white
              font-weight: 600
              border-radius: 3px
              text-align: center

          .shopNow
            margin-bottom: 20px

            > a
              background: #E29C49

        /*点赞or分享样式*/

        .Outer-chain
          height 72px
          margin-top 66px
          border-top 1px solid #ccc
          padding-top 16px

          .Outer-chain-title
            color: #a1a0a0;
            font-size 14px

          .Outer-chain-box
            display flex

            .Twitter
              width 33px
              height 33px
              background url("../../../static/img/Twitter.svg")
              background-size: 34px;
              margin-top 10px
              margin-right 5px
              cursor: pointer;

            .Twitter:hover
              background url("../../../static/img/Twitter-h.svg")
              width 33px
              height 33px
              background-size: 34px;
              margin-top 10px
              margin-right 5px
              cursor: pointer;

            .Facebook
              margin-top 10px
              background url("../../../static/img/facebook.png")
              margin-right 5px
              width 32px
              cursor: pointer;
              height 32px

            .Facebook:hover
              margin-top 10px
              background url("../../../static/img/facebook-h.png")
              margin-right 5px
              width 32px
              cursor: pointer;
              height 32px

            .pinterest
              margin-top 10px
              background url("../../../static/img/pinterest.png")
              margin-right 5px
              width 32px
              cursor: pointer;
              height 32px

            .pinterest a
              display: block
              width: 100%
              height: 100%

            .pinterest:hover
              margin-top 10px
              background url("../../../static/img/pinterest_h.png")
              margin-right 5px
              width 32px
              cursor: pointer;
              height 32px

            .fb-like
              margin-top 16px
              border-radius 3px
              height 20px
              cursor: pointer;

    /*end*/

    .product-detail
      margin-top: 45px
      width: 700px
      height: auto

      .title3
        font-size 18px
        height: 44px
        line-height: 44px
        font-weight: bold
        padding-left: 20px
        border-bottom: 1px solid #ececec

      .detail-info
        min-height: 150px;
        padding: 20px;
        line-height: 30px

      .no-detail-info
        color: #bbbbbb

  article
    margin: 20px 0 0
    padding: 0
    position: relative
    width: 100%

    > h2
      border-bottom: 1px solid #ececec
      font-size: 18px
      font-weight: 600
      margin-top: 0
      margin-bottom: 24px
      padding-left: 20px
      padding-bottom: 18px

    .user-review
      .product-reviews-form
        overflow: hidden
        padding-bottom: 10px

        .img-wrapper
          width: 300px
          height: 182px
          text-align: center
          float: left

          > img
            max-height: 100%
            max-width: 100%

        .product-reviews-product-info
          overflow: hidden
          padding-left: 20px

          > h3
            line-height 30px
            margin-bottom: 10px
            color: #75787b
            font-size: 19px
            font-weight: 300
            margin-top: 0

          > h4
            clear: both
            color: #75787b
            font-size: 15px
            font-weight: 300
            margin: 0 0 5px

          .tooltip-trigger
            overflow: hidden
            padding: 5px 0 10px
            position: relative

          .user-rating
            clear: both
            display: block
            margin-bottom: 30px
            padding: 0
            width: 216px
            border: 1px solid #A5A8AB
            font-size: 16px

            > ul
              margin: 8px auto
              width: 154px

              > li
                font-size: 30px
                width: 30px
                height: 30px
                line-height: 30px
                cursor: pointer

                > i
                  font-size: 30px

          .rating-description
            color: #0185c6
            font: italic 14px OpenSans, Helvetica Neue, Helvetica, Tahoma, Arial, FreeSans, sans-serif
            line-height: 30px
            margin: -30px 17px 0
            position: absolute

      .product-reviews-form-extension
        margin: 0 0 20px;
        overflow: hidden;
        display: none
        position: relative

        .accessibility-hidden
          position: absolute !important;
          height: 1px !important;
          width: 1px !important;
          clip: rect(1px, 1px, 1px, 1px) !important;
          border: 0 !important;
          overflow: hidden !important;

        textarea
          height: 100px
          margin: 0 0 10px
          resize: vertical
          width: 100%
          font-size: 16px
          padding: 12px
          border-radius: 2px
          box-sizing: border-box
          border: 1px solid #a5a8ab
          outline: 0

          &::-webkit-input-placeholder
            color: #A5B0C7

          &:focus
            border-color: #333

        .product-reviews-review-length-notification
          margin-bottom: 10px
          color: #75787b
          font-size: 14px
          font-weight: 400
          line-height: 1.5

        button
          display: inline-block
          margin-right: 10px
          background-color: #18823a
          border: 1px solid rgb(137, 186, 101)
          font-size: 16px
          line-height: 1.4
          padding: .5em 2em
          border-radius: 2px
          position: relative
          text-align: center
          min-width: 180px
          color: #fff
          cursor: pointer

          &:hover
            background-color: rgb(72, 147, 17)
            border-color: rgb(72, 147, 17)

        a
          display: inline-block
          cursor: pointer
          height: 48px
          line-height: 48px
          font-weight: 400
          color: #289fee

      .notification
        border: 1px solid #a5a8ab
        border-radius: 2px
        color: #333
        margin-bottom: 5px
        padding: 20px 24px
        position: relative

    .product-reviews-list, .user-review
      .review-card
        border: 1px solid #f2f2f2
        margin: 10px 0
        overflow: hidden
        padding: 10px

        .review-header
          margin-top: 5px
          overflow: hidden

          .review-header-line
            margin-bottom: 5px
            overflow: hidden

            .review-info
              display: inline-block

              .review-rating
                float: left

              .review-display-name
                font-weight: 600
                margin: 1px 5px 0
                float: left
                max-width: 300px
                line-height: 16px
                color: #75787b
                font-size: 14px

              .icon-check
                color: #a5a8ab
                margin-top: 1px
                margin-right: 5px
                float: left

                > i
                  font-size: 14px

              .review-verified-purchaser
                color: #a5a8ab
                margin-top: 1px
                line-height: 16px;
                font-size: 14px

            .review-date
              float: right
              line-height: 16px
              font-size: 14px
              font-weight: 400
              color: #75787b

        .review-text-container
          color: #75787b
          font-size: 14px
          font-weight: 400
          line-height: 1.5

          .review-text
            white-space: pre-wrap
            word-wrap: break-word
            margin-bottom: 7px
            overflow: hidden

          .rating-only-review
            font-style: italic

        .review-actions
          overflow: hidden
          color: #75787b
          font-size: 14px
          font-weight: 400
          line-height: 1.5

          .review-vote
            color: #a5a8ab
            float: left
            line-height: 30px
            margin-bottom: 7px

            button
              margin-left: 5px
              font-size: 12px
              border: 1px solid #a5a8ab
              color: rgb(117, 120, 123)
              display: inline-block
              cursor: pointer
              min-width: 180px
              outline: 0
              overflow: visible
              line-height: 1.4
              padding: .5em 2em
              border-radius: 2px
              position: relative
              background: #fff
              text-align: center
              transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out

              &:hover
                background: #a5a8ab
                color: #fff

          .review-vote-undo
            clear: left
            margin-bottom: 5px;
            background: #A9D18C
            border: 1px solid #53A318
            border-radius: 2px
            padding: 20px 24px
            padding-left: 59px
            position: relative

            > span
              border: 1px solid green
              border-radius: 50%
              display: block
              margin-top: -13px
              height: 24px
              position: absolute
              text-align: center
              top: 50%
              width: 24px
              left: 18px

              > i
                padding-top: 3px
                font-size: 18px
                color: green

            .vote-undo-link
              color: #0D98E2

          .review-vote-text
            margin-bottom: 7px
            overflow: hidden
            clear: left
            font-weight: 600
            color: #75787b
            font-size: 14px
            line-height: 1.5

    .product-reviews-pagination-loader
      background-color: #fff
      bottom: 0
      display: none
      left: 0
      opacity: .5
      position: absolute
      right: 0
      margin: 0 auto
      text-align: center
      top: 0
      z-index: 1

      .icon-g-loader
        display: inline-block
        position: relative

        &:after
          content: "";
          background-image: url(https://img.grouponcdn.com/sls/rduboAf9brmQAbm46kfNa/g-loader-64x64)
          background-size: cover
          animation: gig-infiniteRotate 1.5s linear infinite
          box-sizing: border-box
          font-size: 2.5em
          height: 1.4em
          left: 50%
          line-height: 1em
          margin-left: -.7em
          margin-top: -.7em
          padding-top: .2em
          position: absolute
          text-align: center
          top: 50%
          width: 1.4em

    .product-reviews-message
      border-bottom: 1px solid #a5a8ab
      color: #a5a8ab
      font-size: 15px
      line-height: .1em
      text-align: center
      margin: 30px auto
      width: 41.667%
      position: relative
      min-height: 1px
      padding: 0 12px

      &:before
        content: ""
        display: table

      &:after
        content: ""
        display: table

      > span
        background: #fff
        padding: 0 5px

    .product-reviews-pagination-notification
      margin-bottom: 5px;
      padding: 20px 24px
      padding-left: 59px;
      border: 1px solid #FF2552
      background: #FFBDCB
      border-radius: 2px
      color: #333
      font-size: 14px
      font-weight: 400
      line-height: 1.5
      position: relative

      > span
        display: block
        margin-top: -13px
        height: 24px
        position: absolute
        text-align: center
        top: 50%
        width: 24px
        left: 18px

        > i
          color: rgb(255, 37, 82)

    .product-reviews-pagination
      margin: 20px
      text-align: center
      color: #75787b;
      box-sizing: border-box
      font-size: 14px
      font-weight: 400
      line-height: 1.5

      button
        margin-left: 5px
        font-size: 16px
        border: 1px solid #a5a8ab
        color: rgb(117, 120, 123)
        display: inline-block
        cursor: pointer
        min-width: 180px
        outline: 0
        overflow: visible
        line-height: 1.4
        padding: .5em 2em
        border-radius: 2px
        position: relative
        background: #fff
        text-align: center
        transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out

        &:hover
          background: #a5a8ab
          color: #fff

  @keyframes gig-infiniteRotate {
    0% {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(1turn)
    }
  }

  .star-box
    display flex

    li:last-child
      color: #289fee

    li:nth-child(6)
      cursor: pointer

    .star-item
      width 16px
      height 16px

    .star-item i
      font-size 16px

  .li-half
    position: relative

    .yellow
      width: 8px
      overflow: hidden
      position: absolute
      left: 0

  /*这里写一些公共的类名样式*/
  .red
    color: #f94c4c

  .green
    color: #18823a !important

  .blue
    color: #4998e2 !important

  .yellow
    color: #fec038

  .gray
    color: #a1a0a0

  .hover-color
    color: rgb(1, 133, 198)

  .keyboard_arrow_down
    color: #f94c4c
    font-size: 26px
    font-weight: 700
    position: absolute
    right: 15px
    bottom: 11px

  .down
    transition: all 0.4s

  .Upward
    transform: rotate(-180deg);
    transition: all 0.4s;

  .priceBox {
    margin-bottom: 15px
    display: flex
    justify-content: space-between

    .leftPrice {
      color: #4999E2
      font-size: 22px
      font-weight: bold

      .oldPrice {
        font-size: 14px
        color: #BBBBBB
        font-weight: 400
        text-decoration: line-through
        margin-bottom: 8px
      }
    }

    .loveIcon {
      width: 32px
      height: 32px
      background: url("../../../static/img/1.png") no-repeat center
      -webkit-background-size: cover
      background-size: cover
      align-self: flex-end

      &.iocnActive {
        background-image: url('../../../static/img/2.png')
      }
    }
  }
</style>
